<script setup lang="ts">
import { Welcome } from 'ant-design-x-vue'
import { SettingOutlined, GithubFilled } from '@ant-design/icons-vue'
import { emitter } from '@/utils/mitt'
import $config from '@/config'
import WelcomeIcon from '@/assets/fmt.png'

// 设置
const onShowSetting = () => {
  // 发送总线通知
  emitter.emit('onShowSettingModal', { tabName: 'default' })
}

// 查看源码
const onViewSource = () => {
  window.open('https://gitee.com/darkwinoom/vue3-ai-scaffold')
}
</script>

<template>
  <Welcome :title="'您好，我是您的 AI 助手' + $config.title">
    <template #icon>
      <img class="!w-[60px] !h-[66px] max-w-[60px]" :src="WelcomeIcon" />
    </template>
    <template #extra>
      <a-space>
        <a-tooltip title="系统设置" placement="top">
          <div class="cursor-pointer" @click="onShowSetting">
            <SettingOutlined class="text-lg icon" />
          </div>
        </a-tooltip>
        <a-tooltip title="查看完整源码" placement="top">
          <div class="cursor-pointer" @click="onViewSource">
            <GithubFilled class="text-lg icon" />
          </div>
        </a-tooltip>
      </a-space>
    </template>
    <template #description> 请问有什么可以帮您的吗~ </template>
  </Welcome>
</template>

<style lang="scss" scoped>
.icon {
  color: var(--vas-title-color);
}
</style>
